<template>

  <div class="app">
    <el-main>

      <el-form :inline="true" class="search-form" style="margin-top: 20px">
        <el-form-item label="标签名称:">
          <el-input v-model="state.searchCriteria.fbqmc" placeholder="请输入标签名称" style="width: 180px" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="load">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            <span style="vertical-align: middle">查询</span>
          </el-button>
          <el-button type="primary" @click="createForm">
            <span style="vertical-align: middle">添加标签</span>
          </el-button>
        </el-form-item>
      </el-form>



      <el-table :data="state.tableData">
        <el-table-column label="编号" prop="fid"></el-table-column>
        <el-table-column label="标签名称" prop="fbqmc"></el-table-column>
        <el-table-column label="可选项" prop="fbq"></el-table-column>
        <el-table-column label="分类" prop="fbqfl">
          <template v-slot:default="{row}">
            <span v-if="row.fbqfl === 1">单选</span>
            <span v-else-if="row.fbqfl === 2">多选</span>
            <span v-else-if="row.fbqfl === 3">自定义</span>
          </template>
        </el-table-column>
        <el-table-column label="最后更新时间" prop="fgxsj" :formatter="row => new Date(row.fgxsj).toLocaleString()"></el-table-column>
        <el-table-column label="创建时间" prop="fcjsj" :formatter="row => new Date(row.fcjsj).toLocaleString()"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="{row}">
            <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="state.searchCriteria.pageNum"
          :page-sizes="[2, 5, 10, 20]"
          v-model:page-size="state.searchCriteria.pageSize"
          layout="total, sizes, prev, pager, next,"
          v-model:total="total"
          style="margin-top: 20px"
      >
      </el-pagination>

    </el-main>
  </div>


  <el-dialog v-model="dialogVisible" title="标签" @close="resetFormData">
    <el-form :model="state.formData">
      <el-form-item label="标签名称:">
        <el-input v-model="state.formData.fbqmc" style="width: 200px"></el-input>
      </el-form-item>

      <el-form-item label="分类:">
        <el-radio-group v-model="state.formData.fbqfl">
          <el-radio :label="1">单选</el-radio>
          <el-radio :label="2">多选</el-radio>
          <el-radio :label="3">自定义</el-radio>
        </el-radio-group>
      </el-form-item>

      <div v-for="(item, index) in state.formData.fbq" :key="index">
        <el-form-item :label="`可选项${index + 1}`">
          <el-input v-model="item.value" style="width: 200px"></el-input>
          <span @click="addItem" v-if="index === 0" style="margin-left: 10px">+</span>
          <span @click="removeItem(index)" v-else style="margin-left: 10px">-</span>
        </el-form-item>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmLabel">确定</el-button>
    </span>

  </el-dialog>

</template>


<script setup>
import {computed, onMounted, reactive, ref, watchEffect} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
const state = reactive({
  searchCriteria : {
    fbqmc: null,
    pageNum : 1,
    pageSize: 5
  },
  tableData : [],
  formData : {
    fid: null,
    fbqmc: null,
    fbqfl: null,
    fbq: [{ value: '' }]
  },
  isEditing: false
})




const handleSizeChange = (size) =>{
  state.searchCriteria.pageSize = size
  load()
}

const handleCurrentChange = (num) =>{
  state.searchCriteria.pageNum = num
  load()
}

let total  = ref(0)


const load = () => {
  request.post("/label/pageSearch",state.searchCriteria).then(res=>{
    state.tableData = res.data.data.data
    total.value = res.data.data.total
  })
}

onMounted(()=>{
  load()
})


//删除
const handleDelete = (row) => {
  // 显示确认对话框
  ElMessageBox.confirm('确定删除该记录吗?', '提示' ,{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(()=>{

    request.post("/label/del/"+row.fid).then(res=>{
        ElMessage.success('删除成功')
        load()
      }).catch(error=>{
        console.log(error);
        ElMessage.error('删除失败')
    })
  })
};

//表单
const dialogVisible = ref(false);

const addLabel = () => {
  // 使用连接的字符串替换原来的数组并直接发送请求
  request.post("/label/add", {
    ...state.formData,
    fbq: state.formData.fbq.map(item => item.value).join('|')
  }).then(res => {
      ElMessage.success('添加成功');
      load();
    }).catch(error =>{
      console.log(error);
      ElMessage.error('添加失败')
  })

  resetFormData();
  dialogVisible.value = false;
}

const updateLabel = () => {
  request.post("/label/update", {
    ...state.formData,
    fbq: state.formData.fbq.map(item => item.value).join('|') // 根据实际情况进行转换
  }).then(res => {
      ElMessage.success('更新成功');
      load();
    }).catch(error => {
      console.log(error);
      ElMessage.error('更新失败')
  })

  resetFormData();
  dialogVisible.value = false;
};

const addItem = () => {
  state.formData.fbq.push({ value: '' });
};

const removeItem = (index) => {
  state.formData.fbq.splice(index, 1);
};

const createForm =()=>{
  state.formData.fbq = [{ value: '' }];
  state.isEditing = false; // 重置isEditing
  dialogVisible.value = true;
}

const resetFormData = () => {
  state.formData.fbqmc = null;
  state.formData.fbqfl = null;
  state.formData.fbq = [{ value: '' }]; // 重置 fbq
  state.isEditing = false; // 重置isEditing
};

//编辑
const handleEdit = (row) => {
  // 填充表单数据

  dialogVisible.value = true;
  state.formData.fid = row.fid
  state.formData.fbqmc = row.fbqmc;
  state.formData.fbqfl = row.fbqfl;
  state.formData.fbq = row.fbq.split('|').map(value => ({ value })); // 假设fbq是一个由`|`分隔的字符串
  state.isEditing = true; // 设置isEditing为true
};

const confirmLabel = () => {
  if (state.isEditing) {
    updateLabel();
  } else {
    addLabel();
  }
};

</script>

<style>
</style>
